<template>
	<view>
		<!-- <uvsticky offset-top="0">
			<view class="topbox">
				<image src="/static/sjimg/05.png" mode="widthFix" class="btimg"></image>
			</view>
		</uvsticky> -->
		<view class="boycss">
			<swiper class="swiper" circular autoplay="true" interval="5000" duration="500">
				<swiper-item class="swipeit" v-for="item in swiperList" :key="item.id">
					<image :src="imgUrl+item.pic" mode="scaleToFill" class="img" />
				</swiper-item>
			</swiper>
			<view class="xicss">
				<image src="/static/sjimg/ty.png" mode="widthFix" class="fimgs" @click="imgo(1)"></image>
				<image src="/static/sjimg/tx.png" mode="widthFix" class="fimgs" @click="imgo(2)"></image>
			</view>
			<view class="liecss">
				<view class="top-tab-list">
					<uvtabs current="0" :list="tabLists" @click="gettab" lineColor="#ff4a82" :activeStyle="{ color: '#ff4a82', fontWeight: 'bold'}"></uvtabs>
				</view>
				<view class="cenlcss" v-for="item in shopList" :key="item.id" v-if="shopList.length>0" >
					<image src="https://m.aqbwg.cn/sourse/xiaowan/dian.jpg" mode="scaleToFill" class="imgucss" v-if="item.pic_door==''||item.pic_door==null"></image>
					<image :src="imgUrls+item.pic_door" mode="scaleToFill" class="imgucss" v-else></image>
					<view class="ltycs">
						<view class="tit">
							<text>{{item.name}} {{(item.discount)/10}}折</text>
							<text>在线点单 快速出餐</text>
						</view> 
						<view class="pricss">
							<text class="pricess">{{(100-item.discount)*10}}</text>
							<image src="/static/sjimg/zt.png" mode="heightFix" class="himg" @click="goBusiness(item.id)"></image>
						</view>
					</view>
				</view>
				<view class="noumg" v-else>
					<image src="/static/sjimg/no.png" mode="widthFix" class="noynag"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onShow , onLoad , onReachBottom } from '@dcloudio/uni-app';
	import { apiBanner , apiMcdicount , apiMctypes } from '@/api/upapi.js';
	import uvsticky from '@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky';
	import uvtabs from '@/uni_modules/uv-tabs/components/uv-tabs/uv-tabs';
	import dayjs from 'dayjs';
	
	const tanIndex = ref(0);
	const tabLists = ref([]);
	const imgUrl = ref('https://i.73cc.com:9555/unipay/');
	// const imgUrl = ref('https://m.aqbwg.cn/sourse/');
	const imgUrls = ref('https://m.aqbwg.cn/sourse/merchant/');
	const swiperList = ref([]);
	const shopList = ref([]);
	const citys =ref('');
	const typeid =ref('');
	const isNext = ref(false);
	const pages = ref(1);
	
	const goBusiness=(e)=>{ uni.navigateTo({ url: '/pagesA/business/business?id='+e }) };
	const imgo=(e)=>{ 
		if(e==1){ 
			// uni.navigateTo({ url: '/pagesA/movie/index' }) 
			uni.showToast({ title: '暂无开放',icon:'none' });
		} else if(e==2){ 
			uni.showToast({ title: '暂无开放',icon:'none' }); 
		} 
	};
	const gettab=(e)=>{
		typeid.value=e.id;
		pages.value=1;
		isNext.value=false;
		shopList.value=[];
		getMcdicount();
	};
	const getBanner = async()=>{
		try {
			let res = await apiBanner({ merchantId:133 });
			if(res.data.result==0){
				swiperList.value=res.data.object
			} else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getMtypes = async()=>{
		try {
			let res = await apiMctypes();
			if(res.data.result==0){
				tabLists.value=res.data.object;
				const data = res.data.object;
				const one = { name: "全部", id: 0 }
				data.unshift(one);
				tabLists.value = data
				typeid.value=data[0].id;
				getMcdicount();
			} else{
				uni.showToast({ title: res.data.msg, icon:'none' });
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	const getMcdicount = async()=>{
		try {
			let res = await apiMcdicount({
				city:uni.getStorageSync('cityName'),
				page:pages.value,
				pageSize:10,
				type:typeid.value
			});
			var data = res.data.object
			if (pages.value == 1) {
				shopList.value = data
			} else {
				shopList.value = shopList.value.concat(data);
			}
			if (data.length >= 10) {
				pages.value = pages.value + 1;
			} else {
				isNext.value = true
			}
		} catch (error) {
			console.error('获取数据失败', error);
		}
	};
	
	onReachBottom(() => {
		console.log('rrtt==',isNext.value);
		if (!isNext.value) {
			getMcdicount(); 
		}
	});
	onShow(() => {
		tanIndex.value=0
		getBanner();
		getMtypes();
	});
	
</script>
<style>
	page{background-color: #fff;height: 100vh;}
</style>
<style scoped lang="scss">
	.topbox{
		padding: 88rpx 30rpx 0rpx;
		background: linear-gradient(30deg, #ffeaf0 5%, #fef7f9 40%,  #fde2e9 80%,  #ffeaf0 100%);
		.btimg{
			width: 180rpx;
		}
	}
	.boycss{
		padding: 20rpx;
		.swiper {
			height: 230rpx;
			margin-top: 10rpx;
		
			.swipeit {
				display: block;
				height: 230rpx;
				border-radius: 20rpx;
				overflow: hidden;
				line-height: 230rpx;
			}
		
			.img {
				width: 100%;
				height: 230rpx;
			}
		}
		.xicss{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0 0;
			.fimgs{
				width: 48%;
				
			}
		}
		.liecss{
			.top-tab-list {
				margin-bottom: 20rpx;
			}
			.noumg{
				display: flex;
				align-items: center;
				justify-content: center;
				.noynag{
					width: 300rpx;
				}
			}
			.cenlcss{
				display: flex;
				margin-bottom: 30rpx;
				.imgucss{
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}
				.ltycs{
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					.tit{
						display: flex;
						flex-direction: column;
						>text:first-child{
							font-size: 28rpx;
							font-weight: 600;
							margin-bottom: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						>text:last-child{
							font-size: 22rpx;
							color: #999999;
						}
					}
					.pricss{
						height: 60rpx;
						background-color: #fef7f9;
						border-radius: 70rpx;
						padding-left: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow: hidden;
						.pricess{
							font-size: 34rpx;
							font-weight: bolder;
							color: #ff4a82;
						}
						
						.pricess::before {
							content: '￥';
							font-size: 22rpx;
						}
						.himg{
							height: 60rpx;
						}
					}
				}
			}
		}
	}
</style>